import Responsive from '@c/responsive'
import styles from './index.module.scss'
import cm from 'classnames'
import { goBack } from '@/utils/utils'
import { downloadReport } from '@/utils/report'
import { DOWNLOAD_URL } from '@/constant'
import { useRouter } from 'next/router'

const Index = () => {
  const router = useRouter()

  return (
    <Responsive top={100}>
      <div className={cm(styles.back, styles.backPhone)} onClick={() => goBack()}>
        <img loading="lazy" alt="返回" src="/images/back.png" />
        <span>返回</span>
      </div>
      <div className={cm(styles.usb, styles.usbPhone)}>
        <p className={styles['nousb-title']}>无U盘安装指南</p>
        <div className={styles['video-course']}>
          <iframe
            width="100%"
            height="100%"
            src="https://www.youtube.com/embed/_4e9zbbfSN0?si=YCRsGP5diS2NZ92G"
            frameBorder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowFullScreen
          ></iframe>
        </div>
        <p className={styles['usb-step']} style={{ marginBottom: 16 }}>
          step1：在电视端和手机端上的Google Play搜索「Send files to TV App」并完成安裝（图1）。
        </p>
        <img loading="lazy" src="/images/nu1.webp" alt="步骤" className={cm(styles['step-img-phone'], 'hideWhenPc')} />
        <p className={styles['usb-step']} style={{ marginBottom: 12 }}>
          step2：手机端点击下方按钮下载电视端安装包。
        </p>
        <img loading="lazy" src="/images/nu2.webp" alt="步骤" className={cm(styles['step-img-phone'], 'hideWhenPc')} />
        <a
          rel="nofollow"
          download
          href={DOWNLOAD_URL.tv}
          className={styles['usb-download']}
          onClick={() => downloadReport('guide_nousb_tv_download')}
        >
          下载安装包
        </a>
        <p className={styles['usb-step']} style={{ marginBottom: 16 }}>
          step3：保证电视与手机
          <span style={{ color: 'var(--theme-color)' }}>连接在同一wifi</span>
          下（图2）。
        </p>
        <p className={styles['usb-step']} style={{ marginBottom: 16 }}>
          step4：手机端点击「SEND发送」，电视端点击「RECEIVE接收」（图3）。
        </p>
        <img loading="lazy" src="/images/nu3.webp" alt="步骤" className={cm(styles['step-img-phone'], 'hideWhenPc')} />
        <p className={styles['usb-step']} style={{ marginBottom: 16 }}>
          step5：1、手机端选择下载的星世界TV端安装包 2、选择投送的电视设备 3、安装包传输已完成（图4）。
        </p>
        <img loading="lazy" src="/images/nu4.webp" alt="步骤" className={cm(styles['step-img-phone'], 'hideWhenPc')} />
        <p className={styles['usb-step']} style={{ marginBottom: 16 }}>
          step6：安装包传输完成后，在电视端返回应用首页，选择右上角文件资源管理器（图5）。
        </p>
        <img loading="lazy" src="/images/nu5.webp" alt="步骤" className={cm(styles['step-img-phone'], 'hideWhenPc')} />
        <p className={styles['usb-step']} style={{ marginBottom: 30, maxWidth: 900 }}>
          step7：选择星视界的安装包，点击安装，同意授权。正常安装结束后，在电视桌面找到“星视界”，立即畅享（图6）。
        </p>
        <img loading="lazy" src="/images/nu6.webp" alt="步骤" className={cm(styles['step-img-phone'], 'hideWhenPc')} />
        <div className={cm(styles['nousb-picture'], 'hideWhenPhone')}>
          {[1, 2, 3, 4, 5, 6].map(item => {
            return (
              <div
                className={styles['nousb-picture-item']}
                style={{ backgroundImage: `url(/images/nu${item}.webp)` }}
                key={item}
              >
                <div className={cm(styles['usb-step-box'], styles['usb-step-phone'])}>{item}</div>
              </div>
            )
          })}
        </div>
        <p className={styles['usb-step']} style={{ marginBottom: 24 }}>
          如果在安装过程中遇到任何问题，可以点击下方按钮加入Telegram群提问，专人解答。
        </p>
        <a
          className={cm(styles.joinChat, styles.joinChatPhone)}
          rel="nofollow"
          href="https://t.me/+OPQzYYKfMK04ODU1"
          target="_blank"
        >
          加入Telegram群聊
        </a>
      </div>
    </Responsive>
  )
}

export default Index

export async function getServerSideProps() {
  return {
    props: {
      layoutProps: {
        noSomeMetaInfo: false,
        url: '/download',
        title: '电视/盒子无USB安装指南 - 星视界',
        desc: '星视界提供最全的中文电视直播及海量影视资源，现已适配手机及电视设备，马上下载开启完整影视&直播体验吧。'
      }
    }
  }
}
